<template>
  <div class="prompt-container" style="height: 100%">
    <HuilanBasicToolbar style="margin-top: 0">
      <!--新增-->
      <el-button
        type="success"
        size="small"
        @click="handlerClickAdd"
      >
        {{$t('aiccCommon.add')}}
      </el-button>
      <!--关闭-->
      <el-button
        size="small"
        @click="handlerClickClose"
      >
        {{$t('aiccCommon.closeBtn')}}
      </el-button>
    </HuilanBasicToolbar>

    <HuilanBasicSearchbar
      :model="searchForm"
      :fields="searchFieldList"
      @search="searchChange"
      @reset="searchReset"
    >
      <template v-slot:businessType>
        <el-select
          v-model="searchForm.businessType"
          filterable
          :placeholder="$t('largeModel.selectFunctionType')"
        >
          <el-option-group
            v-for="group in funList"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.children"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-option-group>
        </el-select>
      </template>
    </HuilanBasicSearchbar>

   <!--提示词列表-->
    <div class="prompt-container">
      <el-row :gutter="50" v-if="promptList.length > 0">
        <el-col :span="6"  style="margin-bottom: 15px;" v-for="(item,index) in promptList" :key="index">
          <div
            class="card-item-container"
            @mousemove="handlerMouseMove(index)"
            @mouseleave="handlerMouseLeave()"
            :class="[currentIndex == index ? 'active' : '']"
            @click="handleCommand('edit',item)"
          >
            <div class="top">
              <img src="/img/systemLogo.png" class="top-img" v-if="item.isDefault == 1"/>
              <div class="title" :title="item.name">
                {{item.name}}
              </div>
              <div class="operate">
                <el-dropdown
                  placement="bottom"
                  @command="handleCommand($event,item)"
                >
                  <i class="el-icon-more"></i>
                  <el-dropdown-menu slot="dropdown">
<!--                    <el-dropdown-item command="view">{{$t('aiccCommon.view')}}</el-dropdown-item>-->
<!--                    <el-dropdown-item command="edit" v-show="item.isDefault != 1">{{$t('aiccCommon.edit')}}</el-dropdown-item>-->
                    <el-dropdown-item command="copy">{{$t('aiccCommon.copy')}}</el-dropdown-item>
                    <el-dropdown-item command="del"  v-show="item.isDefault != 1">{{$t('aiccCommon.delete')}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>

            <div class="middle">
              <div class="function-name">
                <span v-show="item.businessType === null">--</span>
                <span v-show="item.businessType == 1">{{$t('largeModel.similarQuestionGeneration')}}</span> <!--相似问生成-->
                <span v-show="item.businessType == 2">{{$t('largeModel.answerGeneration')}}</span> <!--答案生成-->
                <span v-show="item.businessType == 6">{{$t('largeModel.speechNodeOptimization')}}</span> <!--话术节点优化-->
                <span v-show="item.businessType == 9">{{$t('largeModel.robotFallBack')}}</span> <!--机器人兜底-->
                <span v-show="item.businessType == 10">{{$t('largeModel.userQuestionExpansion')}}</span> <!--用户问题改写-->
                <span v-show="item.businessType == 11">{{$t('largeModel.nodeSceneSpeechRewrite')}}</span> <!--节点情境话术改写-->
                <span v-show="item.businessType == 13">{{$t('largeModel.agentIntelligentSearch')}}</span> <!--坐席智能搜索-->
                <span v-show="item.businessType == 14">{{$t('largeModel.agentIntelligentTranslation')}}</span> <!--坐席一键转写-->
                <span v-show="item.businessType == 15">{{$t('largeModel.agentIntelligentSummary')}}</span> <!--坐席智能小结-->
                <span v-show="item.businessType == 16">{{$t('largeModel.userPortraitLabel')}}</span> <!--用户画像标签-->
                <span v-show="item.businessType == 17">{{$t('largeModel.dataAnalysis')}}</span> <!--数据分析-->
              </div>
<!--              <div class="start-status" v-show="item.isUse == 1">-->
<!--                {{$t('largeModel.enable')}}-->
<!--              </div>-->
<!--              <div class="pause-status" v-show="item.isUse == 0">-->
<!--                {{$t('largeModel.notEnable')}}-->
<!--              </div>-->
            </div>

            <div class="bottom" :title="item.content">
              {{item.content}}
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="no-data" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" v-else>
        <img :src="baseURL+'/img/noData.png'"/>
        <div class="no-data-message" >
          {{$t('aiccCommon.emptyMsg')}}
        </div>
      </div>
    </div>


    <div class="page-container" style="text-align: right" v-if="promptList.length > 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="prev"
        @next-click="next"
        page-size="12"
        layout="total,prev, pager, next,jumper"
        :current-page.sync="page.pageNum"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <AiccDrawer
      ref="addPromptDrawerRef"
      append-to-body
      :title="clickType == 'copy'?$t('largeModel.copeTipWord'):isAddOrEdit == 'add'? $t('largeModel.addTipWord') : $t('largeModel.editTipWord')"
      :visible.sync="isOpenAddPromptDrawer"
      width="550px"
      trigger="click"
      @beforeClose="beforeCloseAddPromptDrawer"
    >
      <template v-slot:aiccMain>
        <AddPrompt
          v-if="isOpenAddPromptDrawer"
          :cur="cur"
          :clickType="clickType"
          ref="addPromptFormRef"
        />
      </template>
      <template v-slot:aiccFooter>
        <el-button size="small" @click="closeAddPromptDrawer">{{$t("aiccCommon.btnCancel") }}</el-button>
        <el-button size="small" type="primary" @click="handlerSave" :loading="isFinished" :disabled="clickType == 'view'">{{$t("aiccCommon.btnSave") }}</el-button>
      </template>
    </AiccDrawer>
  </div>
</template>

<script>
import AddPrompt from './addPrompt.vue';
import {
  modelPromptList,
  modelPromptSaveOrUpdate,
  modelPromptDelete,
  modelPromptCopy,
} from '@/api/aiccApi/aiccLargeModel/index';
import {baseURL} from "@/api/common";
export default {
  components: {
    AddPrompt
  },
  data(){
    return{
      currentIndex:-1,
      page:{
        pageNum:1,
        pageSize:12,
        total:0,
      },
      clickType:'',
      baseURL: baseURL.slice(0, -1),
      promptList:[],
      isOpenAddPromptDrawer:false,
      cur:{},
      isFinished:false,
      isAddOrEdit:'add',
      searchForm:{
        funType:"",  //功能分类
        businessType:'',//功能类型
        wordType:"",  //提示词分类
        name:"",  //提示词名称
      },
      funList:[
        {
          label:this.$t('largeModel.intelligentSessionEnhancement'),  //智能会话增强
          value:'1',
          children:[
            {
              label:this.$t('largeModel.robotFallBack'), //机器人兜底
              value:'9',
            },
            {
              label:this.$t('largeModel.userQuestionExpansion'), //用户问题改写
              value:'10',
            },
            {
              label:this.$t('largeModel.nodeSceneSpeechRewrite'), //节点情境话术改写
              value:'11',
            },
          ],
        },
        {
          label:this.$t('largeModel.knowledgeEnhancement'),  //知识增强
          value:'2',
          children:[
            {
              label:this.$t('largeModel.similarQuestionGeneration'), //相似问生成
              value:'1',
            },
            {
              label:this.$t('largeModel.answerGeneration'), //答案生成
              value:'2',
            },
            {
              label:this.$t('largeModel.speechNodeOptimization'), //话术节点优化
              value:'6',
            },
          ]
        },
        {
          label:this.$t('largeModel.agentAssistantEnhancement'),  //坐席辅助增强
          value:'3',
          children:[
            {
              label:this.$t('largeModel.agentIntelligentSearch'), //坐席智能搜索
              value:'13',
            },
            {
              label:this.$t('largeModel.agentIntelligentTranslation'), //坐席一键转写
              value:'14',
            },
            {
              label:this.$t('largeModel.agentIntelligentSummary'), //坐席智能小结
              value:'15',
            },
          ],
        },
        {
          label:this.$t('largeModel.dataAnalysisEnhancement'),  //数据分析增强
          value:'4',
          children:[
            {
              label:this.$t('largeModel.userPortraitLabel'), //用户画像标签
              value:'16',
            },
            {
              label:this.$t('largeModel.dataAnalysis'), //数据分析
              value:'17',
            },
          ],
        },
      ],
      searchFieldList:[
        {
          type:'select',
          prop:'funType',
          placeholder:this.$t('largeModel.functionClassification'), //功能分类
          dicData:[
            {
              label:this.$t('largeModel.intelligentSessionEnhancement'),  //智能会话增强
              value:'1'
            },
            {
              label:this.$t('largeModel.knowledgeEnhancement'),  //知识增强
              value:'2'
            },
            {
              label:this.$t('largeModel.agentAssistantEnhancement'),  //坐席辅助增强
              value:'3'
            },
            {
              label:this.$t('largeModel.dataAnalysisEnhancement'),  //数据分析增强
              value:'4'
            },
          ],
        },
        {
          slot:'slot',
          prop:'businessType',
        },
        {
          type:'select',
          prop:'wordType',
          placeholder:this.$t('largeModel.tipWordClassification'), //提示词分类
          dicData:[
            {
              label:this.$t('largeModel.systemDefault'),  //系统默认
              value:'1'
            },
            {
              label:this.$t('largeModel.custom'),   //自定义
              value:'0'
            }
          ],
        },
        {
          prop:'name',

          placeholder:this.$t('largeModel.tipWordName'), //提示词名称
        },
      ],
    }
  },
  mounted(){
    this.getPromptList()
  },
  methods:{

    getPromptList(){
      const info = {
        type:this.searchForm.funType,
        businessType:this.searchForm.businessType,
        isDefault:this.searchForm.wordType,
        name:this.searchForm.name,
        current:this.page.pageNum,
        size:this.page.pageSize,
      };
      modelPromptList(info).then(res=>{
        if(res.data.code == 200){
          const Data = res.data.data;
          this.page.total = Data.total;
          this.promptList = Data.records;
        }
      })
    },

    handlerClickAdd(){
      this.isAddOrEdit = 'add';
      this.isOpenAddPromptDrawer = true;
      this.cur = {};
      this.$refs.addPromptDrawerRef.open();
      this.isFinished = false;
      this.clickType = '';
    },

    closeAddPromptDrawer(){
      this.isOpenAddPromptDrawer = false;
      this.isFinished = false;
      this.$refs.addPromptDrawerRef.close();
    },

    beforeCloseAddPromptDrawer(){
      this.closeAddPromptDrawer()
    },

    handlerClickClose(){
      this.$emit('closePrompt')
    },

    handlerSave(){
      const component = this.$refs.addPromptFormRef;
      const form = component.form;
      component.$refs.form.validate(valid=>{
        if(!valid){
          return
        }else{
          const info = {
            name:form.name,
            businessType:form.function,
            isDefault:form.isDefault,
            pattern:form.pattern,
            isUse:form.isUse*1,
            content:form.tipWord,
            id:form.id?form.id:'',
          };

          if(form.function == 9 || form.function == 11 || form.function == 10){
            info.type = 1
          }else if (form.function == 1 || form.function == 2 || form.function == 6){
            info.type = 2
          }else if (form.function == 13 || form.function == 14 || form.function == 15){
            info.type = 3
          }else if (form.function == 16 || form.function == 17 ){
            info.type = 4
          }

          this.isFinished = true;
          if(this.clickType == ''){
            modelPromptSaveOrUpdate(info).then(res=>{
              if(res.data.code == 200){
                this.closeAddPromptDrawer();
                this.getPromptList();
                this.$message.success(this.$t('aiccCommon.successSave'));
                this.isFinished = false;
              }
            }).catch(()=>{
              this.isFinished = false;
            })
          }else if(this.clickType == 'copy'){
            modelPromptCopy(info).then(res=>{
              if(res.data.code == 200){
                this.closeAddPromptDrawer();
                this.getPromptList();
                this.$message.success(this.$t('aiccCommon.successSave'));
                this.isFinished = false;
              }
            }).catch(()=>{
              this.isFinished = false;
            })
          }
        }
      })
    },

    searchChange(){
      this.page.pageNum = 1;
      this.getPromptList()
    },

    searchReset(){
      this.page.pageNum = 1;
      this.searchForm = {
        funType: '',
        wordType: '',
        name: '',
        businessType: '',
      };
      this.getPromptList()
    },

    handleCommand(command,row){
      if(command == 'edit'){
        this.isAddOrEdit = 'edit';
        this.isOpenAddPromptDrawer = true;
        this.cur = row;
        this.$refs.addPromptDrawerRef.open();
        this.isFinished = false;
        this.clickType = '';
        if(row.isDefault == 1){
          this.clickType = 'view';
        }

      }else if(command == 'view'){
        this.isOpenAddPromptDrawer = true;
        this.cur = row;
        this.$refs.addPromptDrawerRef.open();
        this.isFinished = false;
        this.clickType = 'view';
      }else if (command == 'del'){
        const info = {
          ids:row.id
        };
        this.$confirm(this.$t('aiccCommon.delTips'), {
          confirmButtonText: this.$t('aiccCommon.confirm'),
          cancelButtonText: this.$t('aiccCommon.btnCancel'),
          type: 'warning'
        }).then(async () => {
          modelPromptDelete(info).then(res=>{
            if(res.data.code == 200){
              this.$message({
                type: 'success',
                message: this.$t('aiccCommon.delSuccess')
              });
              this.getPromptList();
            }
          })
        })
      }else if(command == 'copy'){
        this.isAddOrEdit = 'add';
        this.isOpenAddPromptDrawer = true;
        this.cur = row;
        this.$refs.addPromptDrawerRef.open();
        this.isFinished = false;
        this.clickType = 'copy';
      }
    },


    //分页相关
    handleSizeChange(size) {
      this.page.pageSize = size;
      this.getPromptList()
    },
    handleCurrentChange(current) {
      this.page.pageNum = current;
      this.currentPage = current;
      this.getPromptList()
    },
    prev(current) {
      this.page.pageNum = current;
      this.getPromptList()
    },
    next(current) {
      this.page.pageNum = current;
      this.getPromptList()
    },

    handlerMouseMove(index) {
      this.currentIndex = index;
    },
    handlerMouseLeave() {
      this.currentIndex = -1
    },
  },
}
</script>

<style scoped lang="scss">
.prompt-container{
  height: calc(100% - 140px);
  overflow-x: hidden;
  .active{
    outline: 1px solid transparent;
    outline-color: #638ef8;
    box-shadow: 0px 6px 16px 4px rgba(6, 7, 46, 0.08);
  }
  .card-item-container{
    border-radius: 12px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 6px 16px 4px rgba(6, 7, 46, 0.08);
    padding:20px;
    cursor: pointer;
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .top-img{
        position: absolute;
        left: -21px;
        top:-21px
      }
      .title{
        font-size: 16px;
        font-family: "Source Han Sans CN";
        color: rgb(7, 11, 45);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .middle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin:20px 0;
      .function-name{
        font-size: 14px;
        font-family: "Source Han Sans CN";
        color: rgb(86, 88, 99);
        line-height: 1.857;
      }
      .start-status{
        padding-left: 4px;
        font-size: 14px;
        font-family: "Source Han Sans CN";
        color: rgb(86, 88, 99);
        border-left: 4px solid rgb(160, 212, 63);
      }
      .pause-status{
        padding-left: 4px;
        font-size: 14px;
        font-family: "Source Han Sans CN";
        color: rgb(86, 88, 99);
        border-left: 4px solid rgb(230, 232, 239);
      }
    }
    .bottom{
      font-size: 14px;
      font-family: "Source Han Sans CN";
      color: rgb(86, 88, 99);
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 限制在两行内 */
      overflow: hidden;
      text-overflow: ellipsis; /* 超出部分显示省略号 */
      height: 42px;
    }
  }
}

.no-data-message{
  ont-size: 14px;
  font-family: "Source Han Sans CN";
  color: rgb(149, 151, 159);
  margin-top: 10px;
  text-align: center;
}
</style>
